<template>
  <div>
    <div>
      <van-nav-bar title="密码登录" left-arrow />
    </div>
    <van-grid clickable :column-num="2">
      <van-grid-item icon="home-o" text="在线客服" />
      <van-grid-item icon="search" text="在线服务" />
    </van-grid>
    <div class="issue">
      <h3 class="dov">热门问题</h3>
      <div>
        <div
          class="dob"
          v-for="(tiem, value) in anmetype"
          :key="value"
          @click="diangji(value)"
        >
          <span> {{ tiem }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <!-- <gjb :obj="xr"></gjb> -->
    </div>
  </div>
</template>

<script>
//在子组件中用props定义好需要接收数据的变量，
//然后在父组件中把这个变量当标签属性使用给他赋值就能将数据传过去了
import { explain } from "../api/registerjk";

// import gjb from "./second.vue";
export default {
  // components: { gjb },
  data() {
    return {
      ojb_arr: "",
      anme: [], //名
      arr: [], //值
      xr: [], //值
      anmetype: [], //值
      value: "",
      id: [],
    };
  },
  async created() {
    await explain().then((res) => {
      console.log(res);
      this.ojb_arr = res.data;
      //把对象转换为数组 Object.keys
      Object.keys(res.data).forEach((tiem, value, ken) => {
        //   tiem他拿的是字符串值
        //  value拿到的是下标
        //  ken 是拿到的是数组
        // console.log(tiem);

        this.anme = ken;

        this.arr.push(this.ojb_arr[tiem]);
      });
      this.arr.forEach((arr, value) => {
        //arr长度小于9时 保存到xr
        if (arr.length >= 9) {
          this.xr.push(arr);
          //   console.log(arr);
          //arr长度大于9时 保存到xr
        } else if (arr.length <= 9) {
          this.anmetype.push(arr);
        }
        // console.log(this.xr);
      });
      this.anmetype.splice(20, 1);
      //   console.log(this.anmetype);
    });
  },
  methods: {
    diangji(id) {
      this.id = this.xr[id];
      this.$router.push({
        path: "./second",
        query: {
          id: this.id,
        },
      });
      console.log(86, this.xr);
    },
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: rgb(89, 89, 218);
  color: aliceblue;
}
.issue {
  margin-left: 17px;
  .dov {
    margin: 25px 0px;
    font-size: 20px;
  }
  .dob {
    // line-height: 60px;
    padding-top: 20px;
    width: 100%;
    height: 40px;
    font-size: 20px;
    border-bottom: 1px solid #999;
    border-top: 1px solid #999;
  }
  .van-icon {
    float: right;
  }
}
</style>